<div class="mb-4<%= " hidden" if option.id.zero? %>"<%= " data-option-template" if option.id.zero? %>>
  <h4 data-option-body>
    <%= translated_attribute(option.body) %>
  </h4>
  <div class="flex items-center justify-between gap-2 mb-2">
    <div class="percent-bar">
      <div class="percent-bar-width" style="width: <%= option.votes_percent %>%" data-option-votes-width="<%= option&.question_id %>,<%= option.id %>"></div>
    </div>
    <div class="text-right text-sm leading-tight shrink-0 min-w-[64px]">
      <div data-option-votes-percent-text="<%= option&.question_id %>,<%= option.id %>"><%= number_to_percentage(option.votes_percent, precision: 1) %></div>
      <div data-option-votes-count-text="<%= option&.question_id %>,<%= option.id %>"><%= t("votes_count", scope: "decidim.elections.elections.show", count: option.votes_count) %></div>
    </div>
  </div>
</div>
